<script setup>
import {onMounted,onBeforeMount,onBeforeUnmount} from "vue";
import {onBeforeRouteLeave, onBeforeRouteUpdate, useRouter} from 'vue-router'
import useTabbarStore from "../store/tabbarStore.js";

const store = useTabbarStore()
const router = useRouter()

onMounted(()=>{
  console.log(router.currentRoute.value.params.myId)
})
const handleback= ()=>{
  router.back()
  // router.go(-1)//往后退1
  // router.go(1)//往前1
  // router.forward()//往前1
}
// watch(() => router.currentRoute.value.params,(value, oldValue)=>{
//   //监听到路由参数变化，请求后端重新更新数据加载到页面
//   console.log(value,oldValue)
// })

onBeforeRouteUpdate((to,from)=>{ //实现和watch一样的功能
  console.log("onBeforeRouteUpdate",to,from)
})

onBeforeRouteLeave(()=>{
  let answer = window.confirm("确定离开？");
  if (!answer){
    return false
  }
})
onBeforeMount(()=>{
  store.isTabbarShow = false
  // store.$patch({
  //   isTabbarShow : false
  // })
})

onBeforeUnmount(()=>{
  // store.isTabbarShow = true
  // store.$patch({
  //   isTabbarShow : true
  // })
  // store.$reset()
  store.change(true)
})

const gotoNewFilm = ()=>{
  router.push(`/films/detail/111`)
}
</script>

<template>
  <div>
    <button @click="handleback">返回</button>
  </div>
  <div><button @click="gotoNewFilm">猜你喜欢</button></div>
</template>

<style scoped>

</style>